<template>
  <div class="contenBox" id="printMe" ref="printContent">
    <h2>考场签到表</h2>
    <div>
      <div class="item" v-for="(ele, i) in list" :key="i">
        <div class="box" v-for="(item, index) in ele" :key="index">
          <header>
            <div class="head">
              <div class="headone">
                <b>{{item[0].userRoomNo}}</b>
              </div>
            </div>
            <div class="head2">
              <div>
                <p>1、此表为准考证存根和考生留验单,在资格复审时查验使用;</p>
                <p>2、此表由考生填写姓名,监考人员认真核对;</p>
              </div>
              <p>监考人签字:</p>
            </div>
          </header>
          <div class="content">
            <div class="content_box" v-for="(ite, ind) in item" :key="ind">
              <div class="content_top">
                <div class="img">
                  <b class="username"> {{ ite.userName.slice(-2) }}</b>
                </div>
                <p>
                  <b>考生签字：</b>
                </p>
              </div>
              <div class="content_cont">
                <p>
                  <b>姓名：{{ ite.userName }}</b>
                </p>
                <p>
                  <b>准考证：{{ ite.userCertNo }}</b>
                </p>
                <p>
                  <b>身份证：{{ ite.userIdCard }}</b>
                </p>
              </div>
              <div class="content_foot">
                <p>
                  <b>座位号：{{ ite.userRoomNumer }}</b>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-empty description="暂无数据" v-if="list == 0"></el-empty>
    <el-button style="float: right" v-print="printObj" class="print"
      >打印</el-button
    >
    <el-button type="info" @click="$router.go(-1)" class="print1"
      >返回</el-button
    >
  </div>
</template>

<script>
import { printSignInFormApi } from "@/api/testManagement/Examination";
export default {
  data() {
    return {
      printObj: {
        id: "printMe", //打印区域 Dom ID
        popTitle: "打印页面标题文字",
        extraCss: "https://www.google.com,https://www.google.com",
        extraHead:
          '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>', //  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题；
      },
      // examId: this.$route.query.ids,
      list: [],
    };
  },
  mounted() {
    // console.log(this.$route.query.ids,'打印ids');
    var ids = this.$route.query.ids;
    console.log(ids, "---------");
    this.getList(ids);
    //  console.log(Date.now());
  },
  methods: {
    getList(ids) {
      printSignInFormApi({ ids: ids }).then((res) => {
        console.log(res, "打印数据");
        console.log(res.data.length);
        if (res.data.length == 1) {
          this.list = res.data;
          console.log(this.list, "单条数据");
        } else {
          this.list = res.data;
          console.log(this.list, "多条数据");
        }
        // this.list = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contenBox {
  width: 97%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  h2 {
    text-align: center;
    line-height: 50px;
  }
  header {
    padding: 20px 0;
    height: 115px;
    // background: rgb(241, 241, 241);
    // -webkit-print-color-adjust: exact;

    .head {
      text-align: center;
      .headone {
        text-align: center;
      }
    }
    .head2 {
      width: 95%;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      p {
        margin-right: 110px;
      }
    }
  }
  .content {
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .content_box {
      width: 19%;
      border: 1px solid #ccc;
      height: 220px;
      margin-top: 10px;
      margin-left: 10px;
      .content_top {
        display: flex;
        width: 100%;
        .img {
          width: 100px !important;
          height: 100px !important;
          border-radius: 50% !important;
          background-color: #007fff !important;
          -webkit-print-color-adjust: exact;
          text-align: center;
          line-height: 100px;
          .username {
            font-size: 20px;
            color: white !important;
          }
        }
        p {
          margin-top: 10px;
        }
      }
      .content_cont {
        // margin-left: 30px;
        margin-top: 10px;
      }
      .content_foot {
        p {
          margin-left: 100px;
          margin-top: 20px;
        }
      }
    }
  }
  .print {
    float: right;
    margin: 0 20px;
  }
  .print1 {
    float: right;
  }
}
</style>
